<ion-header>
  <ion-navbar>
    <ion-title>
      <b>GTI</b>
    </ion-title>
  </ion-navbar>
  <ft-menu [menu]="menus" (changed)="menuChanged($event)"></ft-menu>
</ion-header>

<ion-content #content>
  <div class="ft-tab-events" *ngIf="viewMode == 1">
    <div class="t-tl" >
      <div class="t-tl-header">
        <div class="t-tl-axis">
          <div class="t-tl-joint">
            <div class="t-tl-throw"></div>
            <div class="t-tl-edge"></div>
          </div>
        </div>
        <div class="t-tl-events">
        </div>
      </div>
      <div class="t-tl-content" *ngFor="let items of eventsByMonth">
        <div class="t-tl-axis">
          <div class="t-tl-month">{{items.month.toUpperCase()}}</div>
          <div class="t-tl-month">{{items.year}}</div>
          <div class="t-tl-joint">
            <div class="t-tl-edge"></div>
            <div class="t-tl-throw"></div>
            <div class="t-tl-edge"></div>
          </div>
        </div>
    <!--<script type="text/javascript">
        var arrSimple=items.events;
        for(let i=0;i<arrSimple.length()-1;i++){
            for(let j=i+1;j<arrSimple.length();j++){
              if(arrSimple[i].sort>arrSimple[j].sort){
                let temp =arrSimple[i];   
                arrSimple[i] =arrSimple[j];   
                arrSimple[j] = temp; 
              }
            }
        }
        return arrSimple;
    </script>-->
        <div class="t-tl-events">
          <div class="t-tl-item" *ngFor="let item of items.events" tappable (click)="eventSelect(item)">
            <div class="tl-title">{{item.title}}</div>
            <div class="tl-time" *ngIf="item.dayBegin!=item.dayFinish&&item.isSure=='true'">{{item.dayBegin}}-{{item.dayFinish}}</div>
            <div class="tl-time" *ngIf="item.dayBegin==item.dayFinish&&item.isSure=='true'">{{item.dayBegin}}</div>
            <div class="tl-time" *ngIf="item.isSure!='true'">{{item.time_tbd}}</div>
            <div class="tl-location">{{item.location}}</div>
            <div class="tl-kind ft-margin-tb-10"><span class="ft-tag">{{item.kind | eventKind}}</span></div>
          </div>
        </div>
      </div>
      <div class="t-tl-footer">
        <div class="t-tl-axis">
          <div class="t-tl-month ft-color-gray">End</div>
        </div>
        <div class="t-tl-events">
        </div>
      </div>
    </div>
    <!--<div *ngIf=suveryNgIf padding>
      <div *ngFor="let item of inTheaters">
        <div class="newsList" (click)='suvery(item.id)'>
          <div class="newsPic"><img [src]=item.img></div>
          <div class="newsRelated">
            <div class="newsName">
              <div><span>{{item.name}}</span></div>
            </div>
            <div class="newsSite">
              <div><span>{{item.job}}</span></div>
              <div><span>{{item.company}}</span></div>
            </div>
          </div>  
        </div>
        <hr>
      </div>
    </div>-->
    
  </div>
  <div class="t-tl" *ngIf="viewMode == 2">
      <div *ngFor="let items of suvery">
        <ion-item (click)='toSuvery(items.id)' *ngIf="items.title" tappable>
          <!--<div class="ft-list">
            <div class="ft-list-img" *ngIf="items.bannerlink"><img [src]="items.bannerlink"></div>
            <div class="ft-list-name">      
                <h2><b></b>{{items.title}}</h2>  
            </div>
          </div>-->
          <div class="ft-list">
            <div class="ft-list-img" *ngIf="items.bannerlink"><img [src]="items.bannerlink"></div>
            <div class="ft-list-name">
              <div class="ft-list-title">
                <b>{{items.title}}</b></div>
              <div class="ft-list-text" [innerHtml]="items.des"></div>
            </div>
          </div>
        </ion-item>
    </div>
  </div>
</ion-content>